<template>
  <div class="tag-message-list">
    <basic-container>
       <el-tabs v-model="activeTab" @tab-click="handleClick">
        <el-tab-pane label="待处理举报" name="todo">
        <div class="message-item" v-for="(reported,index) in reportedList" :key="index">
          <a href="##" class="title">
            {{reported.receiver||'未知收件人'}}
          </a>
          <div class="reported ckreported" v-on:click="showReported(index)">查看举报详情</div>
        </div>
        <el-button type="text" class="show-more"> 查看全部列表</el-button>
        </el-tab-pane>
        <el-tab-pane label="已处理举报" name="finished">
          <p class="placeholder"> 暂无数据 </p>
        </el-tab-pane>
      </el-tabs>
      
      <el-dialog title="举报详情" :visible.sync="cardshow">
        <el-card class="box-card" >
          <!-- <div slot="header" class="clearfix">
            <span>举报详情</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div> -->
          <div v-for="(o,index) in reportedMessageContent" :key="index" class="text item">
            {{'消息内容： ' + o.content }}
          </div>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">有效举报</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">无效举报</el-button>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import BasicContainer from '@vue-materials/basic-container';
import Config from '@myconfig/config.min.js';

export default {
  components: { BasicContainer },
  name: 'TagMessageList',
  data() {
    return {
      reportedMessageContent: [],
      reportedMessageIndex: 0,
      cardshow: false,
      activeTab: 'todo',
      reportedList: [
        
      ],
    };
  },
  mounted(){
    this.$http.get(Config.baseUrl + '/api/users/reported/1').then(
      function(rsp){
        console.log('====================================');
        console.log(rsp);
        if(rsp.data.list.length > 0){
          this.reportedList = rsp.data.list
        }
        console.log('====================================');
      },
      function(error){
        console.log('====================================');
        console.log(error);
        console.log('====================================');
      }
    )
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab.name);
    },
    showReported(index){
      this.cardshow = !this.cardshow
      this.reportedMessageIndex = index
      console.log('====================================');
      console.log(this.reportedList[index].content);
      console.log('====================================');
      this.reportedMessageContent = this.reportedList[index].content
    }
  },
};
</script>
<style scoped lang="scss">
@import '~normalize.css/normalize.css';
.ckreported{
  cursor: pointer;
  color: #38f;
  font-size: 1rem;
}
.tag-message-list {
  .el-tabs__content {
    color: #666;
    font-size: 14px;
  }

  .message-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgb(244, 244, 244);

    a.title {
      color: #666;
      text-decoration: none;
    }
    .date {
      font-size: 12px;
    }
  }
  .show-more {
    display: block;
    margin: 20px auto 0;
    padding: 0;
  }
}
</style>
